<template>
  <view class="container" :style="{backgroundImage: `url(${staticImgs.bg})`}">
    <image :src="staticImgs.card1" class="card1" />
    <image :src="staticImgs.card2" class="card2" />
    <image :src="staticImgs.card3" class="card3" />
    <image :src="staticImgs.start" class="start-btn" mode="widthFix" @click="startScl" />
  </view>
</template>

<script>
import navigationBar from '@/components/navigationBar/navigationBar.vue'

export default {
  components:{
    navigationBar
  },
  props: {
    sclInfo: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#000000'
    })
  },
  beforeDestroy() {
    uni.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#ffffff'
    })
  },
  data() {
    return {
      staticImgs: {
        bg: this.imgBaseURL + '/scl/introduce/bestxg/bg.png',
        card1: this.imgBaseURL + '/scl/introduce/bestxg/card1.png',
        card2: this.imgBaseURL + '/scl/introduce/bestxg/card2.png',
        card3: this.imgBaseURL + '/scl/introduce/bestxg/card3.png',
        start: this.imgBaseURL + '/scl/introduce/bestxg/start.png'
      }
    }
  },
  methods: {
    startScl(){
      this.$emit('startScl')
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes move {
  0%, 50%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-100rpx);
  }
  75% {
    transform: translateY(100rpx);
  }
}

.container {
  height: 1624rpx;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
}

.card1 {
  position: absolute;
  top: 812rpx;
  left: 94rpx;
  width: 221rpx;
  height: 234rpx;
  animation: move 10s linear infinite;
}

.card2 {
  position: absolute;
  top: 831rpx;
  left: 402rpx;
  width: 240rpx;
  height: 283rpx;
  animation: move 8s linear infinite;
}

.card3 {
  position: absolute;
  left: 205rpx;
  width: 197rpx;
  height: 205rpx;
  top: 1043rpx;
  animation: move 9s linear infinite;
}

.start-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 92rpx;
  margin: 0 auto;
  width: 580rpx;
  height: 166rpx;
}
</style>